import {
  ProForm,
  ProFormDateTimePicker,
  ProFormText,
  ProFormTimePicker,
} from "@ant-design/pro-components";
import { message } from "antd";

import React from "react";

const Page4: React.FC = () => {
  const handleSubmit = async (values: any) => {
    console.log("表单数据:", values);
    message.success("提交成功！");
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>时间选择表单</h1>
      <ProForm
        onFinish={handleSubmit}
        layout="vertical"
        style={{ maxWidth: 600 }}
      >
        <ProFormText
          name="eventName"
          label="事件名称"
          placeholder="请输入事件名称"
          rules={[{ required: true, message: "请输入事件名称" }]}
        />

        <ProFormDateTimePicker
          name="startTime"
          label="开始时间"
          placeholder="请选择开始时间"
          rules={[{ required: true, message: "请选择开始时间" }]}
        />

        <ProFormDateTimePicker
          name="endTime"
          label="结束时间"
          placeholder="请选择结束时间"
          rules={[{ required: true, message: "请选择结束时间" }]}
        />

        <ProFormTimePicker
          name="reminderTime"
          label="提醒时间"
          placeholder="请选择提醒时间"
        />

        <ProFormTimePicker.RangePicker
          name="workTime"
          label="工作时间"
          placeholder={["开始时间", "结束时间"]}
        />
      </ProForm>
    </div>
  );
};

export default Page4;
